<template>
	<div class="ivu-select-dropdown" :class="className" :style="styles">
		<slot></slot>
	</div>
</template>

<script lang="ts">
	import Anes from "../base";
	import { Prop, Component } from "vue-property-decorator";
	import { getStyle } from "../../utils/assist";
	import { Placement, Instance, createPopper } from "@popperjs/core";
	@Component({})
	export default class DropItem extends Anes {
		@Prop({ default: "bottom-start" })
		placement!: Placement;

		@Prop({ type: String })
		className!: string;

		popper!: Instance | null;
		width = "";
		popperStatus = false;
		tIndex = this.handleGetIndex();

		get styles() {
			const style: any = {};
			if (this.width) {
				style.minWidth = `${this.width}px`;
				//	Object.setPrototypeOf(style, { minWidth: `${this.width}px` });
			}
			//	style.minWidth = `${this.width}px`;

			if (this.transfer) {
				style["z-index"] = (1060 + this.tIndex).toString();
				//style.zIndex = (1060 + this.tIndex).toString();
				/* 	Object.setPrototypeOf(style, {
						"z-index": (1060 + this.tIndex).toString()
					}); */
			}		
			return style;
		}

		created() {
			this.$on("on-update-popper", this.update);
			this.$on("on-destroy-popper", this.destroy);
		}
		beforeDestroy() {
			if (this.popper) {
				this.popper.destroy();
			}
		}

		update() {
			if (this.isServer) return;
			if (this.popper) {
				this.$nextTick(() => {
					if (this.popper) {
						this.popper.update();
						this.popperStatus = true;
					}
				});
			} else {
				this.$nextTick(() => {
					console.info(this.$parent.$refs.reference);
					this.popper = createPopper(
						this.$parent.$refs.reference as Element,
						this.$el as HTMLElement,
						{
							placement: this.placement,
							/* 			modifiers: [
																					{
																						name: "computeStyle",
																						options: {
																							gpuAcceleration: false
																						}
																					},
																					{
																						name: "preventOverflow",
																						options: {
																							boundary: this.$parent
																							//	rootBoundary: "document"
																						}
																					}
																				], */
							onFirstUpdate: () => {
								this.resetTransformOrigin();
								this.$nextTick(() => {
									if (this.popper) this.popper.update();
								});
							}
						}
					);
				});
			}
			// set a height for parent is Modal and Select's width is 100%

			if (this.$parent && this.$parent.$options.name === "iSelect") {
				this.width = getStyle(this.$parent.$el as HTMLElement, "width") as string;
			}
			this.tIndex = this.handleGetIndex();
		}
		destroy() {
			if (this.popper) {
				setTimeout(() => {
					if (this.popper && !this.popperStatus) {
						this.popper.destroy();
						this.popper = null;
					}
					this.popperStatus = false;
				}, 300);
			}
		}
		resetTransformOrigin() {
			// 不判断，Select 会报错，不知道为什么
			if (!this.popper) return;

			const xPlacement = this.popper.state.placement; //.x.getAttribute("x-placement");
			const placementStart = xPlacement.split("-")[0];
			const placementEnd = xPlacement.split("-")[1];
			const leftOrRight = xPlacement === "left" || xPlacement === "right";
			if (!leftOrRight) {
				this.popper.state.styles.transformOrigin =
					placementStart === "bottom" ||
					(placementStart !== "top" && placementEnd === "start")
						? "center top"
						: "center bottom";
			}
		}
		handleGetIndex() {
			this.transferIncrease();
			return this.transferIndex;
		}
	}
</script>

<style>
</style>